<template>
  <div class="mt">
    <card class="confirm-payment-box" title="收款方式" :showDivider="false">
      <page-form-row>
        <page-form-item field="paymentMethod" label="收款方式" size="1">
          <a-radio-group style="flex: 1" v-model="form.paymentScheme" :default-value="2" :options="dict.paymentScheme" />
          <a-button class="billBtn" v-if="form.paymentScheme == 2" type="primary" @click="showBillTable">查看账单计划</a-button>
        </page-form-item>
        <page-form-item v-if="form.paymentScheme == 2" size="1">
          <div class="page-form-block">
            <page-form-item label="付款方式">
              <a-select
                popup-container=".confirm-payment-box"
                style="width: 280px"
                :allow-clear="false"
                v-model="form.paymentMethod"
                placeholder="请选择"
                :options="paymentMethodList"
              />
            </page-form-item>
            <page-form-item class="firstDateStyle" field="lnstalmentFirstDate" v-if="form.paymentScheme == 2" label="首期付款日">
              <i-date-picker style="width: 280px" popup-container=".payment-pane-wrapper" v-model="form.lnstalmentFirstDate" />
            </page-form-item>
          </div>
        </page-form-item>
      </page-form-row>
    </card>
  </div>
  <!-- 账单计划 -->
  <bill-table-modal :isList="false" :billPlanData="billPlanData" ref="billTableModalRef" />
</template>

<script setup>
  import billTableModal from './list-modals/bill-table-modal.vue'
  import { ref, inject, computed } from 'vue'
  import { getCzPayable } from '@/api/order/czsOrder'
  import { Message } from '@arco-design/web-vue'
  import { usePageDict } from '@/hooks/useDict'
  import dayjs from 'dayjs'
  const dict = usePageDict('longOrderDict')

  const form = inject('form')
  const props = defineProps({
    // 订单总金额
    contractAmount: Number,
  })

  // 分期方式
  const paymentMethodList = computed(() => {
    return dict.paymentMethod?.filter((item) => item.label != '全款') || []
  })

  const billTableModalRef = ref()
  const billPlanData = ref([])
  const showBillTable = () => {
    if (!form.value.lnstalmentFirstDate || !form.value.paymentMethod) {
      Message.waring(`请先选择 ${!form.value.lnstalmentFirstDate ? '首期收款日' : '分期方式'} `)
      return
    }
    let params = {
      rentDays: form.value.rentDays,
      contractAmount: props.contractAmount,
      lnstalmentFirstDate: dayjs(form.value.lnstalmentFirstDate).format('YYYY-MM-DD'),
      paymentMethod: form.value.paymentMethod,
    }
    getCzPayable(params).then((res) => {
      billTableModalRef.value.open({ id: '', billData: res.result })
    })
  }
</script>
<style lang="less" scoped>
  .confirm-payment-box {
    position: relative;
  }
  .mt {
    margin-top: 20px;
  }
  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px;
    width: 100%;
    display: flex;
  }
  .firstDateStyle {
    margin-left: 140px;
  }
</style>
